<script setup lang="ts">
import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
const emits = defineEmits(["close", "confirm"]);
const props = defineProps({
  //是否显示弹窗
  visible: {
    type: Boolean,
    default: false
  },
  //弹窗标题
  dialogTitle: {
    type: String,
    default: ""
  },
  //是否显示底部按钮
  isShowFooter: {
    type: Boolean,
    default: true
  }
});
const pureSetting = useSettingStoreHook();
const dialogVisible = ref(false);
const isFullScreen = ref(false); // 弹窗是否全屏
const handleCancelViewDialog = () => {
  emits("close");
};
const handleConfirmViewDialog = () => {
  emits("confirm");
};
watch(
  () => props.visible,
  (newValue, oldValue) => {
    dialogVisible.value = newValue;
    if (!newValue) {
      pureSetting.setButtonInfo({});
    }
  },
  {
    immediate: true,
    deep: true
  }
);
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    :class="[isFullScreen ? 'full-screen-dialog' : '']"
    width="800"
    :draggable="!isFullScreen"
    overflow
    @close="handleCancelViewDialog"
  >
    <template #header="{ titleId, titleClass }">
      <div class="dialog-header">
        <h4 :id="titleId" :class="titleClass">{{ props.dialogTitle }}</h4>
        <div class="dialog-header_right">
          <el-icon
            v-if="!isFullScreen"
            :size="20"
            class="mr-2"
            @click="isFullScreen = true"
          >
            <component
              :is="useRenderIcon('material-symbols-light:zoom-out-map-rounded')"
            />
          </el-icon>
          <el-icon v-else :size="21" class="mr-2" @click="isFullScreen = false">
            <component
              :is="useRenderIcon('material-symbols-light:zoom-in-map')"
            />
          </el-icon>
          <el-icon :size="17" @click="handleCancelViewDialog">
            <component :is="useRenderIcon('ci:close-lg')" />
          </el-icon>
        </div>
      </div>
    </template>
    <div class="dialog-content">
      <slot name="content" />
    </div>
    <template v-if="props.isShowFooter" #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirmViewDialog()">
          确认
        </el-button>
        <el-button @click="handleCancelViewDialog()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
